<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>
<script>
  // for in适合遍历对象，for of适合遍历数组。for in遍历的是数组的索引，对象的属性，以及原型链上的属性。

  // 循环数组
  // 区别：for...in 输出的的是数组的索引值，for...of 输出的是数组的每一项
  let arr = [1, 2, 3, 4]

  // for...in
  for (let key in arr) {
    console.log(key);
  }

  // for...of
  for (let key of arr) {
    console.log(key);
  }

  // 循环对象
  // for...in 可以遍历对象，for...of 不能遍历普通对象，只能遍历带有 iterator 接口的，如Set，Map，Array
  let obj = { name: 'jake', age: 18, sex: '男' }
  // for...in
  for (let key in obj) {
    console.log(key);
  }
  // for...of
  // for (let key of obj) {
  //   console.log(key);
  // }

  // 循环数组对象
  let list = [{ name: 'tom' }, { age: 22 }, { sex: '男' }]
  // for (let key in list) {
  //   console.log(key);
  // }
  for (let key of list) {
    console.log(key);
    for (let i in key) {
      console.log(i);
    }
  }


  // for...in 可以遍历手动添加的其他键，包括原型链上的键， for...of 不会
  let arr2 = [1, 2, 3]
  arr2.num = 66
  Array.prototype.name = '张三'
  // for...in
  for (let key in arr2) {
    console.log(key);
  }
  // for...of
  for (let key of arr2) {
    console.log(key);
  }
</script>

</html>